<template>
	<view class="content">
		<view class="pageTitle">
			欢迎来到<image src="/static/logo_b.png" mode=""></image>
		</view>
		<view class="sbox">
			<view class="item">
				<text>手机号</text>
				<input class="input" maxlength="11" v-model="phone" placeholder-class="placeholder" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<text>验证码</text>
				<view class="code">
					<input type="number" v-model="authCode" placeholder-class="placeholder" placeholder="请输入验证码" />
					<view class="send" :class="{'disabled': countdown > 0}" @click="handleSendCode">
						{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
					</view>
				</view>
			</view>
			<view class="button" @click="handleMobileLogin">
				立即登录
			</view>
		</view>
		<view class="wxLogin">
			<view class="title">
				快捷登录
			</view>
			<button  color="#022e79"  open-type="getPhoneNumber" @getphonenumber="handleWxLogin">
			 <image src="/static/wx.png" mode=""></image>
			</button>
		</view>

		<u-popup :show="show" :round="10" mode="bottom" @close="show = false">
			<view class="notLogged">
				<view class="title">
					<view class="t1">
						授权登录
					</view>
					<view class="t2">
						需要获取您的微信头像，昵称
					</view>
				</view>
				<view class="box">
					<view class="item">
						<view class="left">头像</view>
						<button class="avatarBox" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatarUrl ? avatarUrl :'/static/avatar.png'"></image>
						</button>
					</view>
					<view class="item">
						<view class="left">昵称</view>
						<input class="nickname" type="nickname" value="" placeholder="请输入昵称" @change='changenickname'
							v-model="nickName" />
					</view>
				</view>
				<view class="btn">
					<button class="btn1" type="default" @click="show = false">暂不登录</button>
					<button class="btn2" color="#022e79"  open-type="getPhoneNumber" @getphonenumber="handleWxLogin"
						type="primary">立即登录</button>
					<!-- <button class="btn2" color="#022e79" v-else  @click="handleCheck" type="primary">立即登录</button> -->
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				code: '',
				avatarUrl: '',
				inviter: '',
				nickName: '',
				phone: '',
				authCode: '',
				countdown: 0,
				timer: null
			}
		},
		onLoad() {
			this.inviter = uni.getStorageSync('inviter') || ''
			uni.login({
				success: (res) => {
					this.code = res.code
				}
			})
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			handleCheck(){ 
				if (this.nickName == '') {
					uni.showToast({
						title: "请输入昵称",
						icon: "none"
					})
					return
				}
			},
			handleMobileLogin() {
				if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				if (this.authCode == '') {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				this.$http({
					url: "/sso/wxLogin",
					method: "get",
					data: {
						inviter: this.inviter,
						jsCode: this.code,
						phone: this.phone,
						authCode: this.authCode
					}
				}).then(data => {
					uni.setStorageSync('token',data.tokenHead+ ' ' +data.token)
					this.$store.dispatch('getUserInfo');
					uni.removeStorageSync('inviter')
					uni.showToast({
						title: "登录成功",
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 500)
				})
			},

			handleSendCode() {
				if (this.countdown > 0) return;
				if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				this.$http({
					url: "/sso/getAuthCode",
					method: "get",
					data: {
						telephone: this.phone
					}
				}).then(() => {
					uni.showToast({
						title: "发送成功",
						icon: "none"
					})
					this.countdown = 60;
					this.timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown--;
						} else {
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				})
			},

			changenickname(e) {
				this.nickName = e.detail.value
			},
			onChooseAvatar(e) {
				this.uploadImage(e.detail.avatarUrl)
			},

			uploadImage(file) {
				uni.uploadFile({
					url: 'https://le.bjxlu.com/minio/upload',
					filePath: file,
					name: 'file',
					success: (uploadFileRes) => {
						const data = JSON.parse(uploadFileRes.data)
						if (data.code == 200) {
							this.avatarUrl = data.data.url
						}
					},
					fail: (e) => {
						console.log('eee', e)
					}
				});
			},
			handleWxLogin(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$http({
						url: '/sso/wxLogin',
						method: 'get',
						data: {
							inviter: this.inviter,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							jsCode: this.code,
							nickname: this.nickName,
							icon: this.avatarUrl
						}
					}).then(data => {
						uni.setStorageSync('token', data.tokenHead + ' ' + data.token)
						this.$store.dispatch('getUserInfo');
						uni.removeStorageSync('inviter')
						uni.showToast({
							title: "登录成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 500)
					})
				} else {
					uni.showToast({
						title: "用户取消授权",
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notLogged {
		overflow: hidden;

		.title {
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #eee;

			.t1 {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.t2 {
				font-size: 28rpx;
				margin-top: 10rpx;
				color: #666;
			}
		}
	}

	.btn {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;

		.btn1 {
			width: 30%;
			margin-right: 10px;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn2 {
			font-size: 28rpx;
			flex: 1;
			background: #020202;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.box {
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding: 10rpx 0;

			&:nth-child(1) {
				padding: 20rpx 0;
			}

			.left {
				font-size: 30rpx;
				color: #333;
			}

			.avatarBox {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 0;
				padding: 0;
				border: none;

				&::after {
					border: none;
				}

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.nickname {
				flex: 1;
				height: 80rpx;
				font-size: 30rpx;
				text-align: right;
			}
		}
	}

	.content {
		padding: 90rpx;
		padding-top: 100rpx;

		.pageTitle {
			display: flex;
			align-items: center;
			font-size: 48rpx;
			color: #333;
			margin-bottom: 80rpx;

			image {
				width: 175rpx;
				height: 46rpx;
				margin-left: 10rpx;
			}
		}

		.wxLogin {
			margin-top: 200rpx;
			button{
				background: none;
				padding: 0;
				&::after{
					border: none;
				}
			}
			.title {
				text-align: center;
				font-size: 30rpx;
				color: #999999;
				margin-bottom: 40rpx;
				position: relative;

				&::after {
					content: "";
					width: 98rpx;
					height: 1px;
					background: #BDBDBD;
					position: absolute;
					left: 50%;
					transform: translateX(-180rpx);
					top: 20rpx;
				}

				&::before {
					content: "";
					width: 98rpx;
					height: 1px;
					background: #BDBDBD;
					position: absolute;
					left: 50%;
					transform: translateX(80rpx);
					top: 20rpx;
				}
			}

			image {
				width: 72rpx;
				height: 72rpx;
				display: block;
				margin: 0 auto;
			}
		}

		.sbox {
			.placeholder {}

			.button {
				width: 100%;
				height: 98rpx;
				background: linear-gradient(90deg, #363330 0%, #12100E 100%);
				border-radius: 49rpx;
				text-align: center;
				line-height: 98rpx;
				color: #fff;
				font-size: 32rpx;
			}

			.item {
				margin-bottom: 48rpx;

				text {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					display: block;
					margin-bottom: 32rpx;
				}

				.input {
					width: 100%;
					height: 98rpx;
					background: #F8F8F8;
					border-radius: 49rpx;
					font-size: 30rpx;
					padding: 0 40rpx;
					box-sizing: border-box;
					font-size: 30rpx;
				}

				.code {
					width: 100%;
					height: 98rpx;
					background: #F8F8F8;
					border-radius: 49rpx;
					position: relative;
					display: flex;
					align-items: center;
					padding-left: 40rpx;
					box-sizing: border-box;

					input {
						font-size: 30rpx;
					}

					.send {
						position: absolute;
						right: 40rpx;
						top: 30rpx;
						font-size: 30rpx;
						color: #333;
						cursor: pointer;

						&.disabled {
							color: #999;
							cursor: not-allowed;
						}
					}
				}
			}
		}
	}
</style>